﻿
/* C:\Projects\Workspace2\MSNMetro\Main\MetroSDK\MetroSDK\Content\Source\css\Tmx\basePage\basePage.tmx.mobile.ms.scss */

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#header > div a.channel h1,
#header > div a.channel span, #header > div a.cobrand h1, #header > div a.cobrand span {
  -ms-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#fbcount {
  background: transparent url('hash(/images/social/header/facebook_%MetroSdk.Resolution%.png)') no-repeat 0 0.6rem; }

#fbcount,
#twcount {
  display: inline-block;
  margin-left: 2rem;
  min-height: 2.6rem; }
  #fbcount:first-child,
  #twcount:first-child {
    margin-left: 0; }
  #fbcount a,
  #twcount a {
    padding-left: 2.5rem; }

#language-social {
  list-style: none;
  text-align: center;
  width: 100%; }
  #language-social a,
  #language-social button {
    color: #666;
    text-transform: uppercase; }
  #language-social button {
    background: 0;
    border: 0; }
    #language-social button:hover {
      cursor: pointer; }
  #language-social > li {
    cursor: pointer;
    height: 3rem; }

#username ul {
  display: none;
  text-align: left; }

#twcount {
  background: transparent url('hash(/images/social/header/twitter_%MetroSdk.Resolution%.png)') no-repeat 0 0.6rem; }

#nav-bg {
  display: none; }

/* theme colors */
/* shades of gray */
/* common interface colors */
/* (matbow) This style sheet is common between Ms and Webkit. Ms-specific styling should go in the Ms directory.
However, Webkit does not yet import Base and Base/Mobile as more time is needed to refactor and test Webkit. */
* {
  margin: 0;
  padding: 0; }

a {
  text-decoration: none; }

body {
  color: %darkgray%; }

h2, h3, h4, h5, h6 {
  text-transform: lowercase; }

img {
  border: 0;
  max-width: 100%; }

input {
  border-radius: 0; }

ul.inline,
ul.inline li {
  list-style: none; }

/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
.pollcontainer {
  clear: both;
  float: %Global.Left%; }

.pollheading {
  overflow: hidden; }
  .pollheading,
  .pollheading .heading,
  .pollheading .responses {
    overflow: hidden; }
  .pollheading .heading {
    float: %Global.Left%; }
  .pollheading .responses {
    display: inline;
    float: %Global.Right%;
    color: %mediumgray%;
    text-transform: lowercase;
    align: %Global.Right%; }

.poll {
  clear: both; }
  .poll h3 {
    overflow: hidden; }
  .poll .hide {
    display: none; }
  .poll li {
    list-style-type: none; }
    .poll li .question {
      color: %darkgray%; }
      .poll li .question input {
        float: %Global.Left%; }
      .poll li .question label {
        overflow: hidden; }
    .poll li.last .question {
      margin-bottom: 0; }
    .poll li .result {
      clear: both; }
    .poll li .resultcontainer {
      display: inline-block; }
    .poll li .barcontainer {
      background-color: %dimgray%;
      overflow: hidden; }
      .poll li .barcontainer .bar {
        float: %Global.Left%;
        color: %white%; }
  .poll footer .result {
    float: %Global.Right%; }
  .poll footer .votebtn {
    border: none;
    color: %white%; }
  .poll footer .skiptoresult,
  .poll footer .backtovoting {
    float: %Global.Right%;
    background-color: transparent;
    border: none;
    outline: 0;
    text-transform: lowercase; }
    .poll footer .skiptoresult:hover,
    .poll footer .backtovoting:hover {
      text-decoration: underline;
      cursor: pointer; }

body.slate .pollcontainer:not(&.featured) .heading {
  color: %slate%; }
body.slate .pollcontainer .bar,
body.slate .pollcontainer .votebtn {
  background-color: %slate%; }
body.slate .pollcontainer .skiptoresult,
body.slate .pollcontainer .backtovoting {
  color: %slate%; }

body.indigo .pollcontainer:not(&.featured) .heading {
  color: %indigo%; }
body.indigo .pollcontainer .bar, body.indigo .pollcontainer .votebtn {
  background-color: %indigo%; }
body.indigo .pollcontainer .skiptoresult, body.indigo .pollcontainer .backtovoting {
  color: %indigo%; }

body.msnblue .pollcontainer:not(&.featured) .heading {
  color: %msnblue%; }
body.msnblue .pollcontainer .bar, body.msnblue .pollcontainer .votebtn {
  background-color: %msnblue%; }
body.msnblue .pollcontainer .skiptoresult, body.msnblue .pollcontainer .backtovoting {
  color: %msnblue%; }

body.blue .pollcontainer:not(&.featured) .heading {
  color: %blue%; }
body.blue .pollcontainer .bar, body.blue .pollcontainer .votebtn {
  background-color: %blue%; }
body.blue .pollcontainer .skiptoresult, body.blue .pollcontainer .backtovoting {
  color: %blue%; }

body.aquamarine .pollcontainer:not(&.featured) .heading {
  color: %aquamarine%; }
body.aquamarine .pollcontainer .bar, body.aquamarine .pollcontainer .votebtn {
  background-color: %aquamarine%; }
body.aquamarine .pollcontainer .skiptoresult, body.aquamarine .pollcontainer .backtovoting {
  color: %aquamarine%; }

body.green .pollcontainer:not(&.featured) .heading {
  color: %green%; }
body.green .pollcontainer .bar, body.green .pollcontainer .votebtn {
  background-color: %green%; }
body.green .pollcontainer .skiptoresult, body.green .pollcontainer .backtovoting {
  color: %green%; }

body.orange .pollcontainer:not(&.featured) .heading {
  color: %orange%; }
body.orange .pollcontainer .bar, body.orange .pollcontainer .votebtn {
  background-color: %orange%; }
body.orange .pollcontainer .skiptoresult, body.orange .pollcontainer .backtovoting {
  color: %orange%; }

body.pink .pollcontainer:not(&.featured) .heading {
  color: %pink%; }
body.pink .pollcontainer .bar, body.pink .pollcontainer .votebtn {
  background-color: %pink%; }
body.pink .pollcontainer .skiptoresult, body.pink .pollcontainer .backtovoting {
  color: %pink%; }

.articlecontent section .poll ol {
  margin-left: 0; }
  .articlecontent section .poll ol li,
  .articlecontent section .poll ol li div {
    margin-bottom: 0; }

.pollcontainer.halfpane {
  width: 100%; }

.pollheading {
  margin-bottom: 0.1rem; }
  .pollheading .heading {
    padding-bottom: 0.2rem;
    max-width: 12.5rem; }
  .pollheading .responses {
    margin-top: 1.2rem;
    max-width: 14rem; }

.poll .errormsg {
  margin-bottom: 1.5rem; }
.poll h3 {
  margin-bottom: 0.9rem;
  padding-bottom: 0.2rem;
  text-transform: none; }
.poll li .question {
  max-width: 27.1rem;
  margin-bottom: 1.1rem; }
  .poll li .question input {
    height: 2.3rem;
    width: 2.3rem;
    margin-right: .6rem; }
  .poll li .question label {
    display: block;
    padding-bottom: .2rem;
    max-width: 24.2rem; }
.poll li .barcontainer {
  margin: .2rem 0;
  display: inline-block;
  width: 30rem;
  height: 1.8rem; }
  .poll li .barcontainer .bar {
    padding-left: 0.4rem;
    margin-top: -0.2rem; }
.poll footer .result {
  margin-top: 1rem; }
.poll footer .question {
  margin-top: 1.8rem; }
.poll footer .votebtn {
  height: 3.8rem;
  width: 7rem; }
.poll footer .skiptoresult {
  margin-top: 1rem; }
.poll footer .backtovoting {
  padding-bottom: .2rem; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#breakingnews {
  background: %red%;
  border: solid %red%;
  color: %white%;
  display: block;
  -ms-grid-column-span: 3;
  -ms-grid-row: 4;
  overflow: hidden; }
  #breakingnews a {
    color: %white%; }
  #breakingnews p {
    display: inline; }
    #breakingnews p:nth-child(2):before {
      content: "|";
      padding: 0 .8rem; }
  #breakingnews strong {
    font-family: %fontFamilySemiBold%; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#foot footer a,
#foot footer span {
  color: %mediumgray%;
  display: inline-block;
  margin-right: 1.5rem; }
#foot footer .cobrand a,
#foot footer .cobrand span {
  margin-right: 0; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
body {
  -ms-grid-columns: auto 1fr auto;
  -ms-grid-rows: auto auto auto; }
  body,
  body div.head {
    display: -ms-grid; }
  body div.head {
    -ms-grid-column: 2;
    -ms-grid-row: 1; }

#content,
#foot {
  display: -ms-grid; }

#maincontent {
  -ms-grid-column: 2;
  -ms-grid-row: 2; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#header > div {
  display: -ms-grid;
  -ms-grid-columns: auto auto auto auto;
  -ms-grid-rows: auto; }
  #header > div a.channel, #header > div a.cobrand {
    display: block; }
    #header > div a.channel h1,
    #header > div a.channel span, #header > div a.cobrand h1, #header > div a.cobrand span {
      padding-bottom: .6rem; }
  #header > div a.channel {
    -ms-grid-column: 3;
    -ms-grid-row: 1; }
  #header > div a.cobrand {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    margin: 0 1.5rem 0 0; }
  #header > div a.network {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    display: inline-block;
    height: 5rem;
    width: 15rem;
    z-index: 1; }
    #header > div a.network span {
      display: none; }

.app #language-social {
  display: none; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#nav .outer li {
  list-style-type: none; }
  #nav .outer li,
  #nav .outer li a {
    display: inline-block; }
  #nav .outer li a {
    text-transform: lowercase; }
    #nav .outer li a:not(.current) {
      color: %darkgray%; }
    #nav .outer li a .inner {
      display: none; }

#navmore .inner .inner {
  visibility: hidden; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
* {
  box-sizing: border-box;
  -ms-text-size-adjust: none; }

html.hiperf.loaded body:not(.fullscreen), html.hiperf.loaded body:not(.fullscreen) #search, html.hiperf.loaded body:not(.fullscreen) .head, html.hiperf.loaded body:not(.fullscreen) #foot, html.hiperf.loaded body:not(.fullscreen) #maincontent, html.hiperf.loaded body:not(.fullscreen) #main {
  transition: width .22s, height .22s, padding .22s, margin .22s; }

body {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  margin: 0 .5rem 2rem; }
  body:not(.fullscreen) #maincontent {
    position: relative; }

a:active {
  background-color: transparent; }

/* theme colors 
---------------------------------------------------*/
.bg.slate {
  background-color: %slate%;
  color: %white%; }

.fg.slate,
.fg.slate:visited,
.heading.fg.slate a,
.related .heading.slate,
.related .heading.slate a {
  background-color: transparent;
  color: %slate%; }

a.network.slate svg {
  fill: %slate%; }

.bg.indigo {
  background-color: %indigo%;
  color: %white%; }

.fg.indigo,
.fg.indigo:visited,
.heading.fg.indigo a,
.related .heading.indigo,
.related .heading.indigo a {
  background-color: transparent;
  color: %indigo%; }

a.network.indigo svg {
  fill: %indigo%; }

.bg.msnblue {
  background-color: %msnblue%;
  color: %white%; }

.fg.msnblue,
.fg.msnblue:visited,
.heading.fg.msnblue a,
.related .heading.msnblue,
.related .heading.msnblue a {
  background-color: transparent;
  color: %msnblue%; }

a.network.msnblue svg {
  fill: %msnblue%; }

.bg.blue {
  background-color: %blue%;
  color: %white%; }

.fg.blue,
.fg.blue:visited,
.heading.fg.blue a,
.related .heading.blue,
.related .heading.blue a {
  background-color: transparent;
  color: %blue%; }

a.network.blue svg {
  fill: %blue%; }

.bg.aquamarine {
  background-color: %aquamarine%;
  color: %white%; }

.fg.aquamarine,
.fg.aquamarine:visited,
.heading.fg.aquamarine a,
.related .heading.aquamarine,
.related .heading.aquamarine a {
  background-color: transparent;
  color: %aquamarine%; }

a.network.aquamarine svg {
  fill: %aquamarine%; }

.bg.green {
  background-color: %green%;
  color: %white%; }

.fg.green,
.fg.green:visited,
.heading.fg.green a,
.related .heading.green,
.related .heading.green a {
  background-color: transparent;
  color: %green%; }

a.network.green svg {
  fill: %green%; }

.bg.orange {
  background-color: %orange%;
  color: %white%; }

.fg.orange,
.fg.orange:visited,
.heading.fg.orange a,
.related .heading.orange,
.related .heading.orange a {
  background-color: transparent;
  color: %orange%; }

a.network.orange svg {
  fill: %orange%; }

.bg.pink {
  background-color: %pink%;
  color: %white%; }

.fg.pink,
.fg.pink:visited,
.heading.fg.pink a,
.related .heading.pink,
.related .heading.pink a {
  background-color: transparent;
  color: %pink%; }

a.network.pink svg {
  fill: %pink%; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#search {
  height: 4rem;
  margin-top: 3.8rem;
  background-color: %white%; }
  #search #srchfrm {
    display: -ms-grid;
    -ms-grid-columns: 1fr 5.6rem auto;
    -ms-grid-rows: 1; }
  #search label {
    display: none; }
  #search input[type=search] {
    display: inline-block;
    -ms-grid-column: 1;
    vertical-align: top;
    border: none;
    height: 3.6rem; }
  #search div.binglogo {
    display: inline-block;
    -ms-grid-column: 2;
    /* until WebGrease is fixed, always use pixels for background positions; they'll get converted to rem during the build process.
       But in the mean-time, WebGrease needs the source to be in pixels to properly combine re-used images. */
    background: %white% url('hash(/images/binglogo_%MetroSdk.Resolution%.png)') no-repeat %Global.Left% 4px;
    height: 3.6rem;
    width: 5.6rem; }
  #search #sw_as {
    margin-top: 3.6rem;
    position: relative;
    z-index: 6000; }
    #search #sw_as .sa_as {
      padding-top: 0.1rem; }
  #search .sa_hd_first {
    margin-left: 0; }
  #search .sa_drw li {
    font-size: 100%; }

/* (matbow) This style sheet is common between Ms and Webkit. Ms-specific styling should go in the Ms directory.
However, Webkit does not yet import Base and Base/Mobile as more time is needed to refactor and test Webkit. */
#header {
  white-space: nowrap; }
  #header > div {
    margin-left: .2rem; }
    #header > div > a, #header > div > a:link, #header > div > a:visited, #header > div > a:hover, #header > div > a:active {
      margin-top: .2rem; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
body.username {
  position: relative; }
  body.username .mobilead,
  body.username #breakingnews,
  body.username #foot > footer,
  body.username #fbcount,
  body.username #header > div,
  body.username #langtoggle,
  body.username #maincontent,
  body.username #nav,
  body.username #twcount,
  body.username #search {
    display: none !important; }
  body.username #sign-in-out {
    height: auto; }
  body.username #language-social #username {
    left: 0;
    max-width: 100%;
    padding: 3rem 1rem;
    position: fixed;
    text-align: %Global.Left%;
    top: 0;
    width: 100%;
    z-index: 1001; }
    body.username #language-social #username a,
    body.username #language-social #username button {
      color: %darkgray%;
      text-transform: none; }
    body.username #language-social #username button {
      margin-left: 1rem; }
    body.username #language-social #username ul a {
      width: 100%; }
    body.username #language-social #username ul,
    body.username #language-social #username ul li {
      display: block; }
    body.username #language-social #username ul li {
      padding-left: 1rem;
      padding-top: 2rem; }

#fbcount:last-child,
#twcount:last-child {
  margin-bottom: 1.2rem; }

#fbcount + #langtoggle, #twcount + #langtoggle {
  margin-top: .8rem; }
#sign-in-out + #langtoggle, #username + #langtoggle {
  margin-top: -0.2rem; }

#language-social {
  margin-top: 1.4rem; }

#language-social > #sign-in-out,
#username {
  margin-top: .8rem; }

/* (matbow) This style sheet is common between Ms and Webkit. Ms-specific styling should go in the Ms directory.
However, Webkit does not yet import Base and Base/Mobile as more time is needed to refactor and test Webkit. */
.ad {
  display: none; }

body > section:nth-of-type(1).mobilead {
  margin: 1rem 0 0; }
body > div.head {
  -ms-grid-row: 2; }

.mobilead {
  margin-bottom: 1rem; }

#mobilead {
  margin-left: -1rem;
  margin-right: -1rem;
  line-height: 0.5rem;
  border: 0;
  text-align: center; }
  #mobilead .hide {
    display: none; }

/* (matbow) This style sheet is common between Ms and Webkit. Ms-specific styling should go in the Ms directory.
However, Webkit does not yet import Base and Base/Mobile as more time is needed to refactor and test Webkit. */
#search {
  height: 3rem;
  width: 3rem; }
  #search.long {
    width: 17rem; }
    #search.long .sa_drw li {
      white-space: normal; }
  #search .sw_b3 {
    overflow: hidden; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#breakingnews {
  padding: 0 1rem .1rem;
  margin-top: 1rem;
  width: 100%; }
  body #breakingnews {
    border-width: %BreakingNews.Ms.Mobile.BorderWidth%; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#foot {
  -ms-grid-column: 2;
  -ms-grid-row: 4;
  margin-top: 3.1rem; }
  #foot footer {
    text-align: center; }
    #foot footer a,
    #foot footer span {
      font-family: %fontFamilySmallMobile%;
      font-size: %fontSizeSmallMobile%;
      font-weight: %fontWeightSmallMobile%;
      line-height: %lineHeightSmallMobile%; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
body.slate #header .carat {
  background: transparent url('hash(/images/NavigationCarat/navigationcarat_slate_%MetroSdk.Resolution%.png)') no-repeat 0 0; }

body.indigo #header .carat {
  background: transparent url('hash(/images/NavigationCarat/navigationcarat_indigo_%MetroSdk.Resolution%.png)') no-repeat 0 0; }

body.msnblue #header .carat {
  background: transparent url('hash(/images/NavigationCarat/navigationcarat_msnblue_%MetroSdk.Resolution%.png)') no-repeat 0 0; }

body.blue #header .carat {
  background: transparent url('hash(/images/NavigationCarat/navigationcarat_blue_%MetroSdk.Resolution%.png)') no-repeat 0 0; }

body.aquamarine #header .carat {
  background: transparent url('hash(/images/NavigationCarat/navigationcarat_aquamarine_%MetroSdk.Resolution%.png)') no-repeat 0 0; }

body.green #header .carat {
  background: transparent url('hash(/images/NavigationCarat/navigationcarat_green_%MetroSdk.Resolution%.png)') no-repeat 0 0; }

body.orange #header .carat {
  background: transparent url('hash(/images/NavigationCarat/navigationcarat_orange_%MetroSdk.Resolution%.png)') no-repeat 0 0; }

body.pink #header .carat {
  background: transparent url('hash(/images/NavigationCarat/navigationcarat_pink_%MetroSdk.Resolution%.png)') no-repeat 0 0; }

#header > div {
  -ms-grid-column: 1;
  transition: transform .13s linear .09s; }
  #header > div a.carat {
    display: block;
    height: 2rem;
    margin: 0 0 0 .4rem;
    -ms-grid-column: 4;
    width: 2rem;
    position: relative;
    top: 1.7rem; }
  #header > div a.channel, #header > div a.cobrand {
    max-width: 16.5rem; }
    #header > div a.channel h1,
    #header > div a.channel span, #header > div a.cobrand h1, #header > div a.cobrand span {
      font-family: %fontFamilyLargeMobile%;
      font-size: %fontSizeLargeMobile%;
      font-weight: %fontWeightLargeMobile%;
      line-height: %lineHeightLargeMobile%;
      display: block;
      margin: %headerDivAMarginTopSnap% 0 0 0.5rem; }
    #header > div a.channel.longtitle, #header > div a.cobrand.longtitle {
      -ms-grid-column: 1;
      -ms-grid-row: 2; }
      #header > div a.channel.longtitle h1,
      #header > div a.channel.longtitle span, #header > div a.cobrand.longtitle h1, #header > div a.cobrand.longtitle span {
        min-height: 2.7rem;
        margin: .1rem 0 0;
        max-width: none; }
      #header > div a.channel.longtitle + .carat, #header > div a.cobrand.longtitle + .carat {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
        margin-top: .5rem;
        position: static; }
  #header > div a.network {
    height: 4rem;
    margin-top: .3rem;
    width: 7rem; }
.expand #header > div {
  visibility: hidden; }
#header .inner {
  display: none; }

#logo-search-wrapper {
  display: -ms-grid;
  -ms-grid-columns: auto 1fr; }
  .expand #logo-search-wrapper {
    -ms-grid-columns: 0 100%; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
body.username #username a,
body.username #username button {
  font-family: %fontFamilyMediumMobile%;
  font-size: %fontSizeMediumMobile%;
  font-weight: %fontWeightMediumMobile%;
  line-height: %lineHeightMediumMobile%; }

#language-social a,
#language-social button {
  font-family: %fontFamilySmallMobile%;
  font-size: %fontSizeSmallMobile%;
  font-weight: %fontWeightSmallMobile%;
  line-height: %lineHeightSmallMobile%; }
#language-social + footer[role="contentinfo"] {
  margin-top: -0.1rem; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
body > section.mobilead {
  -ms-grid-column: 2;
  -ms-grid-row: 1;
  display: block; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#nav {
  display: none; }
  .mobilemenu #nav {
    display: block;
    background-color: %white%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 3rem 1rem;
    position: fixed;
    z-index: 1; }
    .mobilemenu #nav .outer {
      white-space: nowrap; }
      .mobilemenu #nav .outer,
      .mobilemenu #nav .outer li.current h1 {
        font-family: %fontFamilyMediumMobile%;
        font-size: %fontSizeMediumMobile%;
        font-weight: %fontWeightMediumMobile%;
        line-height: %lineHeightMediumMobile%; }
      .mobilemenu #nav .outer li {
        min-height: 4rem;
        float: %Global.Left%;
        clear: %Global.Left%;
        width: 100%; }
        .mobilemenu #nav .outer li a {
          padding: .4rem .4rem 2rem 0; }
          .mobilemenu #nav .outer li a.current {
            font-family: %fontFamilyNormalMobile%; }
            .mobilemenu #nav .outer li a.current + .inner {
              display: block; }
              .mobilemenu #nav .outer li a.current + .inner a {
                padding-left: 2.4rem; }
          .mobilemenu #nav .outer li a:not(.current) {
            color: %darkgray%; }
        .mobilemenu #nav .outer li .inner {
          display: none; }

.mobilemenu {
  overflow: hidden; }
  .mobilemenu #breakingnews,
  .mobilemenu #content,
  .mobilemenu #foot,
  .mobilemenu .mobilead {
    display: none; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
h2, h3, h4, h5, h6 {
  font-family: %fontFamilyMediumMobile%;
  font-size: %fontSizeMediumMobile%;
  font-weight: %fontWeightMediumMobile%;
  line-height: %lineHeightMediumMobile%; }

body {
  font-family: %fontFamilyNormalMobile%;
  font-size: %fontSizeNormalMobile%;
  font-weight: %fontWeightNormalMobile%;
  line-height: %lineHeightNormalMobile%;
  margin: 0 1rem 2rem;
  min-width: 30rem;
  overflow-x: hidden; }
  body > div.head {
    display: block;
    margin-bottom: 1rem; }

#content {
  -ms-grid-rows: auto auto; }

#foot {
  display: block;
  margin-top: 0; }
  #foot footer {
    margin: 1.5rem 0; }

html {
  -ms-content-zooming: none; }

#maincontent {
  -ms-grid-row: 3; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
.pollheading .heading {
  font-family: %fontFamilyMediumLargeMobile%;
  font-size: %fontSizeMediumLargeMobile%;
  font-weight: %fontWeightMediumLargeMobile%;
  line-height: %lineHeightMediumLargeMobile%;
  max-height: 3rem; }
.pollheading .responses {
  font-family: %fontFamilyNormalMobile%;
  font-size: %fontSizeNormalMobile%;
  font-weight: %fontWeightNormalMobile%;
  line-height: %lineHeightNormalMobile%;
  max-height: 2.2rem; }

.poll,
.poll .skiptoresult,
.poll .backtovoting,
.poll li .question label {
  font-family: %fontFamilyNormalMobile%;
  font-size: %fontSizeNormalMobile%;
  font-weight: %fontWeightNormalMobile%;
  line-height: %lineHeightNormalMobile%; }
.poll h3,
.poll .votebtn {
  font-family: %fontFamilyMediumMobile%;
  font-size: %fontSizeMediumMobile%;
  font-weight: %fontWeightMediumMobile%;
  line-height: %lineHeightMediumMobile%; }
.poll h3 {
  max-height: 5rem; }
.poll label {
  max-height: 3.6rem; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#search {
  -ms-grid-column: 2;
  -ms-grid-column-align: end;
  -ms-grid-row-align: end;
  -ms-transition-property: width;
  -ms-transition-duration: .22s;
  transition-timing-function: ease-out;
  border: solid .1rem #bebebe;
  margin-top: .8rem; }
  .expand #search {
    width: 100%; }
    .expand #search #srchfrm {
      -ms-grid-columns: 1fr 5.6rem auto; }
    .expand #search input[type=search] {
      display: inline-block; }
    .expand #search input[type=submit].image {
      -ms-grid-column: 3; }
    .expand #search div.binglogo {
      display: inline-block;
      /* we just need to set background-position-y to zero, but we can't just set that value by itself
         because the image gets sprited and the position will be wrong. So completely repeat the
         entire background property so the position will be updated accordingly once the image is
         sprited */
      background: %white% url('hash(/images/binglogo_%MetroSdk.Resolution%.png)') no-repeat %Global.Left% 0; }
  #search #srchfrm {
    -ms-grid-columns: 1fr; }
  #search div.binglogo {
    display: none;
    height: 2.8rem; }
  #search input[type=search] {
    display: none;
    font-size: %fontSizeNormalMobile%;
    height: 2.8rem;
    padding-left: .9rem; }
  #search input[type=submit].image {
    display: inline-block;
    -ms-grid-column: 1;
    vertical-align: top;
    -ms-grid-column-align: end;
    background: %bingorange% url('hash(/images/spyglass_mobile_%MetroSdk.Resolution%.png)') no-repeat %Global.Right% 0.1rem;
    border: solid 0.1rem %white%;
    color: %white%;
    height: 2.8rem;
    width: 2.8rem; }
  #search input[type=submit].text {
    display: none; }
  #search #sw_as {
    margin-top: 2.8rem; }
  #search.long #srchfrm {
    -ms-grid-columns: 1fr auto; }
  #search.long input[type=search] {
    display: inline-block; }
    #search.long input[type=search]:-ms-input-placeholder {
      font-size: %fontSizeSmallMobile%; }
  #search.long input[type=submit].image {
    -ms-grid-column: 2; }
  #search.long #sw_as {
    width: 16rem; }
  #search.long .sa_drw li {
    font-family: %fontFamilyNormalMobile%;
    font-size: %fontSizeNormalMobile%;
    font-weight: %fontWeightNormalMobile%;
    line-height: %lineHeightNormalMobile%; }
    #search.long .sa_drw li strong {
      font-family: %fontFamilyNormal%; }

.expand #header > div {
  -ms-transform: translate(-200%, 0px); }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
.touchnavigation {
  color: #888; }
  .touchnavigation .subtitle {
    font-family: %fontFamilyExtraLargeMobile%;
    font-size: %fontSizeExtraLargeMobile%;
    font-weight: %fontWeightExtraLargeMobile%;
    line-height: %lineHeightExtraLargeMobile%;
    margin: 0 1rem;
    color: %mediumgray%; }
  .touchnavigation .title {
    display: none; }

/* Rescale for apollo. */
/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
/* portrait */
@media (orientation: portrait) {
  @-ms-viewport {
    width: %MediaQueries.Apollo.Portrait.ViewPortWidth%; } }
/* landscape */
@media (orientation: landscape) {
  @-ms-viewport {
    width: %MediaQueries.Apollo.Landscape.ViewPortWidth%; } }


/* C:\Projects\Workspace2\MSNMetro\Main\MetroSDK\MetroSDK\Content\Source\css\Tmx\landingPage\landingPage.tmx.mobile.ms.scss */

/* theme colors */
/* shades of gray */
/* common interface colors */
.dept {
  float: left;
  clear: none; }
  .dept a:not(.adfeedback),
  .dept p {
    color: %white%;
    width: 100%; }
  .dept a {
    background-color: transparent;
    display: block;
    height: 100%;
    overflow: hidden; }
  .dept .bg:not(.noimage) img {
    display: block;
    width: 100%; }
  .dept .bg:not(.noimage) p {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    position: absolute; }
  .dept .noimage img {
    display: none; }
  .dept .noimage p {
    height: 100%; }

#featured .featured.filler {
  display: none; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
.heading.bg,
.heading.bg a, .heading.fg, .heading.fg a {
  -ms-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }

#main > h1,
#main > h2,
#main .deptcluster > h2 {
  display: none; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
.cluster,
.ip {
  font-family: 'segoe ui';
  font-size: 1.8rem; }
  .cluster a,
  .ip a {
    color: %white%;
    position: relative; }
  .cluster li,
  .ip li {
    display: inline-block;
    list-style: none;
    vertical-align: top; }
    .cluster li.noimage:not(.hasimage) p,
    .ip li.noimage:not(.hasimage) p {
      height: 30rem; }
  .cluster p,
  .ip p {
    background: rgba(0, 0, 0, 0.8);
    left: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    white-space: normal; }
  .cluster ul,
  .ip ul {
    font-size: 0;
    white-space: nowrap; }

.ip .hasimage p {
  bottom: .5rem; }
.ip .noimage:not(.hasimage) p {
  background: rgba(0, 0, 0, 0.2); }

.slidecount {
  display: table;
  height: .5rem;
  opacity: .9;
  position: relative; }
  .slidecount span {
    border: solid rgba(0, 0, 0, 0.6);
    border-width: 0 .1rem .05rem;
    display: table-cell;
    height: .6rem;
    line-height: .6rem;
    opacity: 1; }
    .slidecount span:not(.selected) {
      background-color: rgba(255, 255, 255, 0.5); }
    .slidecount span:last-child {
      border-left-color: %black%;
      border-right-color: %black%; }
    .slidecount span:not(:last-child) {
      border-left-color: %black%;
      border-right-color: transparent; }

#aside,
#toc {
  display: none; }

/* theme colors */
/* shades of gray */
/* common interface colors */
.pollcontainer.featured .pollheading {
  height: 4.3rem;
  margin-bottom: .8rem; }
  .pollcontainer.featured .pollheading .heading {
    padding: 0 1rem;
    color: %white%; }
  .pollcontainer.featured .pollheading .responses {
    padding-right: 1rem;
    color: %white%; }

.featured .poll label {
  max-height: 1.8rem; }
.featured .poll h3 {
  margin-bottom: 0.8rem; }
.featured .poll .barcontainer {
  margin-bottom: 0; }
.featured .poll li .question {
  margin-bottom: 2.1rem; }
  .featured .poll li .question label {
    max-height: 2.2rem; }
.featured .poll li.last,
.featured .poll li.last .result {
  margin-bottom: 0; }
.featured .poll li.last .question {
  margin-bottom: 2rem; }
.featured .poll li .result {
  margin-bottom: 0.5rem; }
.featured .poll footer .result {
  margin-top: 0; }

body.slate .pollcontainer.featured .pollheading {
  background-color: %slate%; }

body.indigo .pollcontainer.featured .pollheading {
  background-color: %indigo%; }

body.msnblue .pollcontainer.featured .pollheading {
  background-color: %msnblue%; }

body.blue .pollcontainer.featured .pollheading {
  background-color: %blue%; }

body.aquamarine .pollcontainer.featured .pollheading {
  background-color: %aquamarine%; }

body.green .pollcontainer.featured .pollheading {
  background-color: %green%; }

body.orange .pollcontainer.featured .pollheading {
  background-color: %orange%; }

body.pink .pollcontainer.featured .pollheading {
  background-color: %pink%; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
.cluster .videoicon span, .dept .videoicon span, .ip .videoicon a > span {
  position: absolute; }
.cluster .videoicon span, .dept .videoicon span {
  background: transparent url('hash(/images/video/videolt_%MetroSdk.Resolution%.png)') 0 0 no-repeat;
  width: 1.4rem;
  height: 1.4rem; }
.dept .videoicon {
  position: relative; }
  .dept .videoicon span {
    bottom: .7rem; }

.dept.cluster1 {
  height: 14.5rem; }
.dept.cluster2.tilegroupa, .dept.cluster2.tilegroupc {
  height: 30rem; }
.dept.cluster2.tilegroupb {
  height: 14.5rem; }
.dept.cluster3.tilegroupa, .dept.cluster3.tilegroupb {
  height: 30rem; }
.dept.cluster3.tilegroupc {
  height: 45.5rem; }

#aside,
.ad,
.featured {
  display: none; }

#featured .featured.filler {
  display: none !important; }

.heading > a,
.heading > span {
  margin-left: auto;
  margin-right: auto;
  display: block; }
.cluster .heading .chevron {
  display: none; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#content {
  display: block; }

.cluster,
.ip {
  width: 100%;
  overflow: hidden;
  margin: 0 .6rem 1rem 0; }
  .cluster ul a,
  .cluster img,
  .ip ul a,
  .ip img {
    display: inline-block;
    height: 17rem;
    width: 30rem; }
  .cluster li,
  .ip li {
    border: solid %white%;
    border-width: 0 .1rem; }
  .cluster .hasimage p,
  .ip .hasimage p {
    padding: .5rem .9rem .2rem; }
  .cluster .hasimage.selected p,
  .ip .hasimage.selected p {
    border-bottom: solid .6rem transparent; }
  .cluster .hasimage:not(.selected) p,
  .ip .hasimage:not(.selected) p {
    border-bottom: solid 1.1rem transparent;
    bottom: 0; }
  .cluster .selected:not(.noimage):not(.hasimage) p,
  .ip .selected:not(.noimage):not(.hasimage) p {
    max-height: 5.5rem; }
  .cluster.invalid ul,
  .ip.invalid ul {
    width: 100%; }
  .cluster.invalid li:nth-child(1),
  .ip.invalid li:nth-child(1) {
    display: table;
    position: relative;
    margin-left: auto;
    margin-right: auto; }
  .cluster.invalid .slidecount,
  .ip.invalid .slidecount {
    right: 0; }
  .cluster.invalid li:not(.selected),
  .cluster.invalid .slidecount span:not(.selected),
  .ip.invalid li:not(.selected),
  .ip.invalid .slidecount span:not(.selected) {
    display: none; }

.cluster {
  height: 21rem; }
  .cluster .hasimage.selected p {
    bottom: .5rem; }
  .cluster .noimage:not(.hasimage) p {
    background: rgba(0, 0, 0, 0.3); }
  .cluster .noimage:not(.hasimage) p {
    border-bottom: solid 2rem transparent;
    padding: 1.2rem 1.5rem; }
  .cluster .navtile {
    display: none; }

.ip {
  height: 17rem;
  margin-bottom: .6rem; }
  .ip .noimage:not(.hasimage) p {
    padding: .9rem 1.5rem; }

.slidecount {
  margin: 0 auto;
  width: 30rem; }

.dept .videoicon span {
  bottom: .5rem; }
.dept .videoicon p, #main .cluster .videoicon p, #main .ip .videoicon p {
  padding-right: 2rem; }
.cluster .videoicon span, .ip .videoicon a > span {
  bottom: 1.4rem;
  right: .6rem; }
.ip .videoicon a > span {
  background: transparent url('hash(/images/video/videolt_%MetroSdk.Resolution%.png)') 0 0 no-repeat;
  width: 1.4rem;
  height: 1.4rem; }

.leftarrow,
.rightarrow {
  display: none; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
#main {
  -ms-grid-column-span: 2;
  -ms-grid-columns: 1fr; }

.dept {
  display: -ms-grid;
  -ms-grid-columns: 15.5rem 14.5rem;
  width: 30rem;
  margin: 0 1rem 1rem 0; }
  .dept .bg {
    position: relative; }
  .dept .noimage a {
    padding: %clusterTilePadding%; }
  .dept .noimage p {
    -ms-hyphens: auto;
    -ms-hyphenate-limit-lines: 3;
    -ms-hyphenate-limit-zone: 8rem;
    padding: 0;
    background: none; }
  .dept p {
    display: block;
    font-family: %fontFamilyNormalLight%;
    max-height: %clusterMaxHeight%;
    overflow: hidden;
    padding: %clusterAnchorParaPadding%; }

/*
	// These are values you can use when you want to debug the pattern
	article {
		&.large
		{
			border:5px solid blue;
		}

		&.big
		{
			border:5px solid red;
		}

		&.small
		{
			border:5px solid green;
		}

		&.none
		{
			border:5px solid pink;
		}
	}
*/
/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
.heading.bg {
  font-family: %fontFamilyMediumLarge%;
  font-size: %fontSizeMediumLarge%;
  font-weight: %fontWeightMediumLarge%;
  line-height: %LandingPage.FeaturedHeading.LineHeight%;
  padding-top: %paddingTopMediumLarge%;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-lines: 3;
  -ms-hyphenate-limit-zone: 8rem;
  -ms-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  bottom: .3rem;
  height: 4.3rem;
  padding: %LandingPage.FeaturedHeading.PaddingTop% 0.9rem 0;
  position: relative;
  margin-left: -0.9rem;
  margin-right: -0.9rem; }
  .heading.bg > a {
    box-sizing: content-box;
    display: inline-block;
    padding: 0 0.9rem;
    width: 100%;
    height: 100%;
    -ms-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; }

.featured,
.ip {
  display: inline-block; }

.swipenav {
  -ms-scroll-chaining: none;
  -ms-overflow-style: none; }
  .swipenav li {
    -ms-overflow-style: none; }

#featured .mobilead {
  display: block; }

#main section.withad:nth-of-type(1) {
  display: none; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
.dept .noimage p {
  max-height: 13.8rem; }
.dept.tilegroupa > :nth-child(1), .dept.tilegroupb > :nth-child(3), .dept.tilegroupc > :nth-child(1) {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  -ms-grid-row: 1;
  width: 30rem;
  height: 14.5rem; }
.dept.cluster1 {
  -ms-grid-rows: 15.5rem; }
.dept.cluster1, .dept.cluster2, .dept.cluster3 {
  width: 30rem; }
  .dept.cluster1.tilegroupa > :nth-child(1), .dept.cluster1.tilegroupb > :nth-child(1), .dept.cluster1.tilegroupc > :nth-child(1), .dept.cluster2.tilegroupa > :nth-child(1), .dept.cluster2.tilegroupb > :nth-child(1), .dept.cluster2.tilegroupc > :nth-child(1), .dept.cluster3.tilegroupa > :nth-child(1), .dept.cluster3.tilegroupb > :nth-child(1), .dept.cluster3.tilegroupc > :nth-child(1) {
    -ms-grid-column: 1;
    -ms-grid-row: 1; }
.dept.cluster2.tilegroupa, .dept.cluster2.tilegroupc {
  -ms-grid-rows: 15.5rem 14.5rem; }
  .dept.cluster2.tilegroupa > :nth-child(2), .dept.cluster2.tilegroupc > :nth-child(2) {
    -ms-grid-column: 1;
    -ms-grid-row: 2; }
.dept.cluster2.tilegroupb {
  -ms-grid-rows: 14.5rem; }
  .dept.cluster2.tilegroupb > :nth-child(2) {
    -ms-grid-column: 2;
    -ms-grid-row: 1; }
.dept.cluster3.tilegroupa, .dept.cluster3.tilegroupb {
  -ms-grid-rows: 15.5rem 14.5rem; }
.dept.cluster3.tilegroupa > :nth-child(2) {
  -ms-grid-column: 1;
  -ms-grid-row: 2; }
.dept.cluster3.tilegroupa > :nth-child(3) {
  -ms-grid-column: 2;
  -ms-grid-row: 2; }
.dept.cluster3.tilegroupb > :nth-child(2) {
  -ms-grid-column: 2;
  -ms-grid-row: 1; }
.dept.cluster3.tilegroupb > :nth-child(3) {
  -ms-grid-column: 1;
  -ms-grid-row: 2; }
.dept.cluster3.tilegroupc {
  -ms-grid-rows: 15.5rem 15.5rem 14.5rem; }
  .dept.cluster3.tilegroupc > :nth-child(2) {
    -ms-grid-column: 1;
    -ms-grid-row: 2; }
  .dept.cluster3.tilegroupc > :nth-child(3) {
    -ms-grid-column: 1;
    -ms-grid-row: 3; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
.cluster .heading.bg {
  font-family: %fontFamilyMediumLargeMobile%;
  font-size: %fontSizeMediumLargeMobile%;
  font-weight: %fontWeightMediumLargeMobile%;
  line-height: %LandingPage.FeaturedHeading.LineHeight%; }
.cluster > .heading {
  margin-bottom: -0.3rem; }
.heading.bg {
  background-image: url('hash(/images/mobileHeaderOverlay_%MetroSdk.Resolution%.png)');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 400rem .1rem; }
  .heading.bg > a,
  .heading.bg > span {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 28rem; }

/* Media Query definitions */
/* Font Style Short Hand */
/* media queries sizes */
/* theme colors */
/* shades of gray */
/* common interface colors */
/* Left & Right */
/* might extend with zone-limit in the future */
.cluster p,
.ip p {
  font-family: %fontFamilyNormalLightMobile%;
  font-size: %fontSizeNormalMobile%;
  font-weight: 100;
  line-height: %lineHeightNormalMobile%; }
.cluster .hasimage.selected p,
.ip .hasimage.selected p {
  max-height: 5.3rem; }
.cluster .hasimage:not(.selected) p,
.ip .hasimage:not(.selected) p {
  max-height: 5.8rem; }
.cluster ul:not(.loaded):not(.invalid) li,
.ip ul:not(.loaded):not(.invalid) li {
  opacity: 0; }
.cluster .loaded li:not(.selected),
.ip .loaded li:not(.selected) {
  opacity: .6; }
.cluster li,
.ip li {
  transition: opacity .22s ease 0s, transform 0s ease 0s; }

.cluster .noimage:not(.hasimage) p {
  max-height: 17.3rem; }

.ip h3 {
  display: none; }
.ip .noimage:not(.hasimage) p {
  border-bottom: solid 2.4rem transparent;
  max-height: 17.5rem; }

.slidecount {
  top: -1.6rem; }

.dept .videoicon span {
  right: .5rem; }

.cluster li.videoicon:not(.selected) span,
.ip li.videoicon:not(.selected) span {
  bottom: 1.4rem; }

/* Mobile Portrait */
@media screen and (max-width: %MediaQueries.MobilePortraitMax%) {
  .dept {
    height: 45.5rem;
    width: 30rem; }

  /* Media Query definitions */
  /* Font Style Short Hand */
  /* media queries sizes */
  /* theme colors */
  /* shades of gray */
  /* common interface colors */
  /* Left & Right */
  /* might extend with zone-limit in the future */
  .dept {
    -ms-grid-rows: 15.5rem 15.5rem 14.5rem; }
    .dept.tilegroupa > :nth-child(2), .dept.tilegroupb > :nth-child(1) {
      -ms-grid-column: 1;
      -ms-grid-row: 2;
      height: 14.5rem;
      width: 14.5rem; }
    .dept.tilegroupa > :nth-child(3), .dept.tilegroupb > :nth-child(2) {
      -ms-grid-column: 2;
      -ms-grid-row: 2;
      height: 14.5rem;
      width: 14.5rem; }
    .dept.tilegroupa > :nth-child(4), .dept.tilegroupb > :nth-child(4) {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      -ms-grid-row: 3;
      width: 30rem;
      height: 14.5rem; }
    .dept.tilegroupc > :nth-child(2) {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      -ms-grid-row: 2;
      width: 30rem;
      height: 14.5rem; }
    .dept.tilegroupc > :nth-child(3) {
      -ms-grid-column: 1;
      -ms-grid-row: 3;
      height: 14.5rem;
      width: 14.5rem; }
    .dept.tilegroupc > :nth-child(4) {
      -ms-grid-column: 2;
      -ms-grid-row: 3;
      height: 14.5rem;
      width: 14.5rem; } }
/* Mobile Landscape */
@media screen and (min-width: %MediaQueries.MobileLandscapeMin%) {
  .dept {
    height: 30rem;
    width: 45.5rem; }

  /* Media Query definitions */
  /* Font Style Short Hand */
  /* media queries sizes */
  /* theme colors */
  /* shades of gray */
  /* common interface colors */
  /* Left & Right */
  /* might extend with zone-limit in the future */
  .dept {
    -ms-grid-columns: 15.5rem 15.5rem 14.5rem;
    -ms-grid-rows: 15.5rem 14.5rem; }
    .dept.tilegroupa > :nth-child(2), .dept.tilegroupb > :nth-child(1), .dept.tilegroupc > :nth-child(3) {
      -ms-grid-column: 3;
      -ms-grid-row: 1;
      height: 14.5rem;
      width: 14.5rem; }
    .dept.tilegroupa > :nth-child(4), .dept.tilegroupb > :nth-child(4), .dept.tilegroupc > :nth-child(2) {
      -ms-grid-column: 2;
      -ms-grid-column-span: 2;
      -ms-grid-row: 2;
      width: 30rem;
      height: 14.5rem; }
    .dept.tilegroupa > :nth-child(3), .dept.tilegroupb > :nth-child(2), .dept.tilegroupc > :nth-child(4) {
      -ms-grid-column: 1;
      -ms-grid-row: 2;
      height: 14.5rem;
      width: 14.5rem; }
    .dept.cluster2.tilegroupa {
      -ms-grid-rows: 15.5rem; }
      .dept.cluster2.tilegroupa > :nth-child(1) {
        -ms-grid-column: 1;
        -ms-grid-row: 1; }
      .dept.cluster2.tilegroupa > :nth-child(2) {
        -ms-grid-column: 2;
        -ms-grid-row: 1; } }

